<template>
    <div style="width: 100%;">
        <el-form :inline="true" :model="role">
            <el-form-item label="姓名">
                <el-input v-model="role.roleName" placeholder="角色名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
            <el-button @click="addBtn">添加</el-button>
        </el-form>
        <el-table
                :data="pageResult.records"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="270">
            </el-table-column>
            <el-table-column
                    prop="roleName"
                    label="角色名"
                    width="270">
            </el-table-column>
            <el-table-column
                    prop="roleCreatedate"
                    label="创建时间"
                    width="270">
            </el-table-column>
            <el-table-column
                    prop="roleText"
                    label="描述"
                    width="270">
            </el-table-column>
            <el-table-column
                    prop="roleStatus"
                    label="状态"
                    width="270">
                <template slot-scope="scope">
                    {{scope.row.roleStatus == 'Y' ? '有效':'无效'}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template  slot-scope="scope">
                    <el-dropdown @command="handleUpdate" trigger="click">
                        <el-button>
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="scope.row.id+'-修改-'+scope.row.roleStatus">修改</el-dropdown-item>
                            <el-dropdown-item :command="scope.row.id+'-删除-'+scope.row.roleStatus">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="提示"
                width="42%"
                :visible.sync="dialogVisible">
            <Management_authority v-on:refresh3="refresh4"  v-if="dialogVisible" :id="id"></Management_authority>
        </el-dialog>

        <el-dialog
                title="添加角色"
                width="42%"
                :visible.sync="dialogVisible2">
            <Add_role v-on:refresh="refresh" v-if="dialogVisible2" ></Add_role>
        </el-dialog>

        <el-footer class="case-exam-footer">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageResult.total"
                    :page-size="pageResult.size"
                    class="pagination"
                    @current-change="handleIndexChange"
            >
            </el-pagination>
        </el-footer>
    </div>
</template>

<script>

    import Management_authority from './Management_authority.vue'
    import Add_role from './Add_role.vue'

    import SystemRoleService from '../../../model/mfy/system_user/SystemRoleService.js'
    const systemRoleService = SystemRoleService.getInstance()

    export default {
        name: "System_user",
        data(){
            return {
                pageResult:{},
                roles: [],
                dialogVisible:false,
                dialogVisible2:false,
                id:'',
                role:{}
            }
        },
        created(){
            this.list();
        },
        methods:{
            list(){
                systemRoleService.list(this.role).then((response)=>{
                    this.pageResult=response.data.data;
                })
            },

            handleIndexChange(index){
                this.role.page = index
                this.list()
            },
            search(){
                this.role.page=1
                this.list()
            },
            refresh(){
                this.dialogVisible2=false;
                this.list();
            },
            handleUpdate(id) {
                var val = id.split("-");
                if (val[1] == '修改') {
                    if(val[2]=='Y'){
                        this.dialogVisible = true
                        this.id = val[0]
                    }else{
                        this.$message.error('该角色无效!');
                    }

                }else if (val[1] == '删除') {
                    systemRoleService.del(val[0]).then((response)=>{
                       if(response.data.code=="400"){
                           this.$message.error(response.data.message);
                       }
                        this.list();
                    })
                }
            },
            addBtn(){
                this.dialogVisible2=true
            },
            refresh4(){
                this.dialogVisible=false
                this.list();
            }

        },
        components:{
            Management_authority,
            Add_role
        }
    }
</script>

<style scoped>
    .case-exam-footer{
        width: 100%;
        position: relative;
    }
    .pagination{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
